<template>
    <u-transition :show="show">
        <u-list
            @scrolltolower="scrolltolower"
        >
            <u-sticky offsetTop="-44">
                <view class="top">
                    <view class="activity-num">可抽奖 {{userActivity? userActivity.awardTime:0}} 次</view>
                    <u-count-down
                        :time="activityInfo.endTime"
                        format="HH:mm:ss"
                        autoStart
                        @change="onChange"
                    >
                        <view class="time">
                            <view class="activity-time-title">距离开奖</view>
                            <text class="time__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}:</text>
                            <text class="time__item">{{ timeData.minutes>=10? timeData.minutes:'0'+timeData.minutes }}:</text>
                            <text class="time__item">{{ timeData.seconds>=10? timeData.seconds:'0'+timeData.seconds }}</text>
                        </view>
                    </u-count-down>
                </view>
            </u-sticky>
            <view class="ul">
                <view class="li" v-for="info in tableData" :key="info.id">
                    <view class="icon"></view>
                    <view class="info">
                        <view class="title">{{ info.description }}</view>
                        <view class="date">{{ info.createAt }}</view>
                        <view class="num">{{ info.number }}</view>
                    </view>
                </view>
            </view>
        </u-list>
    </u-transition>
</template>

<script>
    import { getActivityNum, getActivityDetail } from "@/config/api"
    export default {
        data() {
            return {
                timeData: {},
                activityId: null,
                activityInfo: {
                    endTime: 0
                },
                userActivity: null,
                activityDetail: null,
                listQuery: {
                    page: 1,
                    list_rows: 10,
                    activityId: null
                },
                total: 0,
                tableData: [],
                show: false
            }
        },
        async onLoad(option) {
            this.activityId = option.activityId
            this.listQuery.activityId = option.activityId
            await this.getData()
            await this.getActivityLog()
            this.show = true
        },
        methods: {
            async getData() {
                const res = await getActivityNum({activityId: this.activityId})
                this.activityInfo = res.activityInfo
                this.userActivity = res.userActivity
                this.activityDetail = res.activityDetail
            },
            async getActivityLog(more = false) {
              const res = await getActivityDetail(this.listQuery)
                if (more) {
                   this.tableData = [...this.tableData, ...res.items]
                } else {
                    this.tableData = res.items
                }
                this.total = res.total
            },
            scrolltolower() {
                if (this.total > this.tableData.length) {
                    this.listQuery.page += 1
                    this.getActivityLog(true)
                }
            },
            onChange(e) {
                this.timeData = {
                    hours: e.hours + e.days * 24,
                    minutes: e.minutes,
                    seconds: e.seconds
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .top {
        box-sizing: border-box;
        width: 100%;
        height: 56rpx;
        background: #F7B500;
        //padding: 9rpx 14rpx;
        overflow: hidden;
        z-index: 9999;
        .activity-num {
            margin-left: 14rpx;
            margin-top: 9rpx;
            float: left;
            width: 181rpx;
            height: 38rpx;
            background: #FFFFFF;
            border-radius: 19rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #F7B500;
            text-align: center;
            line-height: 38rpx;
        }
        .activity-time {
            float: left;
            text-align: center;
            display: flex;
            align-items: center;
            margin-left: 70rpx;
            .activity-time-title {
                margin-top: 7rpx;
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }
        }
        .time {
            display: flex;
            align-items: center;
            margin-left: 70rpx;
            height: 56rpx;
            .time__item {
                font-size: 26rpx;
                color: #FFFFFF;
                font-weight: bold;
                line-height: 56rpx;
            }
            .activity-time-title {
                line-height: 56rpx;
                font-size: 26rpx;
                font-weight: 400;
                color: #FFFFFF;
                margin-right: 10rpx;
            }
        }
    }
    .ul {
        margin-top: 56rpx;
        padding: 0 20rpx;
        .li {
            margin-bottom: 64rpx;
            display: flex;
            .icon {
                background: url("https://img.ionepin.com/ee5b3d218794b17a980ce62ad969f6735be9437a.png") no-repeat;
                background-size: 100% 100%;
                width: 50rpx;
                height: 50rpx;
            }
            .info {
                flex: auto;
                margin-left: 14rpx;
                position: relative;
                .title {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                }
                .date {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #888888;
                    margin-top: 16rpx;
                }
                .num {
                    position: absolute;
                    right: 0;
                    top: 5rpx;
                    font-size: 26rpx;
                    font-family: PingFang-SC-Bold, PingFang-SC;
                    font-weight: bold;
                    color: #FA6400;
                }
            }
        }
    }
</style>
